import React from 'react';
import { connect } from 'react-redux';
import actions from '../../store/actions/todo';
@connect(
    state => state.todo,
    actions
)
class TodoHeader extends React.Component {
    constructor() {
        super();
    }
    //取得未完成的todo数量
    getUnfinishedCount = () =>
        this.props.todos.filter(i => !i.isComplete).length;
    handleAddTodo = () => {
        this.props.addTodo({
            id: +new Date(),
            title: this.todoTitle.value,
            isComplete: false
        });
    };
    handleAddSyncTodo = () => {
        this.props.addTodoSync({
            id: +new Date(),
            title: this.todoTitle.value,
            isComplete: false
        });
    };
    render() {
        return (
            <div>
                <div>您有{this.getUnfinishedCount()}件事未完成</div>
                <div>
                    <label htmlFor="todo">待办项：</label>
                    <input
                        type="text"
                        name="todo"
                        ref={input => (this.todoTitle = input)}
                    />
                    <button onClick={this.handleAddTodo}>添加</button>
                    <button type="primary" onClick={this.handleAddSyncTodo}>
                        异步添加
                    </button>
                </div>
            </div>
        );
    }
}

//此时的state就是todos:[...]数据
export default TodoHeader;
